import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import CoreLayout from 'containers/layout'
import { getPageFlag, getFileBlob, downloadBlod, getPostData, getFlagValue } from 'services/utils'
import QueryTable from '../components/query-table'
import { Button, Icon, Dropdown, Menu } from 'antd'
import { connect } from 'react-redux'
import _ from 'lodash'

const accessFlag = getPageFlag('/proto-role/user-charge', 'access')
const exportFlag = getPageFlag('/proto-role/user-charge', 'export')
const MenuItem = Menu.Item

@connect(
  state => ({
    auth                : state.Passport.auth,
    postData            : state.Proto.postData,
  }),
)
export default class UserCharge extends PureComponent {

  render () {
    const { location, postData, auth } = this.props
    const { PostOptions, BodyData } = getPostData(postData, 'user-charge')
    let options = {
      layoutOptions: {
        location,
        pageCode: accessFlag.value,
        breadcrumb: [
          { name: '主页', link: '/' },
          { name: '玩家信息类' },
          { name: '充值记录' }
        ],
      },
      searchOptions: {
        begin: {
          format: 'YYYY-MM-DD',
          required: { required: true, message: `请选择时间点!` }
        },
        roleId: {
          name: '玩家ID',
        }
      },
      proto: 'user-charge',
      tableColumns: [
        {
          key: '1',
          title: '创建时间',
          dataIndex: 'data_0',
          width: 200
        },
        {
          key: '2',
          title: '购买商品',
          dataIndex: 'data_1',
          width: 100
        },
        {
          key: '3',
          title: '支付价格',
          dataIndex: 'price',
          render: (price) => _.toNumber(price).toFixed(2),
          width: 200
        },
        {
          key: '4',
          title: '支付方式',
          dataIndex: 'payment',
          filters: [
            { text: 'wechat', value: 'wechat' },
            { text: 'wifi', value: 'wifi' },
            { text: 'alipay', value: 'alipay' },
            { text: 'cheat', value: 'cheat' },
            { text: 'ios', value: 'ios' },
            { text: 'null', value: 'null' },
          ],
          onFilter: (value, record) => record.payment.includes(value),
          width: 120
        },
        {
          key: '5',
          title: '订单号',
          dataIndex: 'data_4'
        },
        {
          key: '6',
          title: '玩家ID',
          dataIndex: 'data_5',
          width: 150
        }
      ],
      tableScroll: { },
      tablePagination: true,
      tools: [
        <Dropdown overlay={(
            <Menu onClick={this.handleClickExport}>
              <MenuItem key="csv">csv文件</MenuItem>
            </Menu>
          )}
          disabled={!BodyData || getFlagValue(auth, exportFlag.value, null)}
          >
          <Button style={{ marginLeft: 8 }} >
            导出数据 <Icon type="down" />
          </Button>
        </Dropdown>,
        <a id="download-blob-file"></a>
      ],
      refresh: true,
      //remark: []

    }
    return (
      <QueryTable  {...options} />
    )
  }

  handleClickExport = ({ key }) => {
    const { postData } = this.props
    const { PostOptions, BodyData} = getPostData(postData, 'user-charge')
    if (!BodyData) return
    if (key === 'csv') {
      let blodString = `\uFEFF创建时间,购买商品,支付价格,支付方式,订单号,玩家ID\r\n`
      for (let lineData of BodyData) {
        let lineInfo = filterLineData(lineData.split(';'))
        blodString += lineInfo
        blodString += '\r\n'
      }
      let fileBlob = getFileBlob(blodString, { type: 'text/cvs', encoding: 'utf-8' })
      downloadBlod(fileBlob, `user-charge.csv`)
    }
  }
}

const filterLineData = lineData => {
  let arr = []
  for (let e of lineData) {
    let info = e
    if (/\"/.test(e)) {
      info = info.replace(/\"/g, '\"\"')
    }
    arr.push(`"${info}\t"`)
  }
  return _.join(arr, ',')
}